<template>
  <el-dialog :title="isEdit?'修改字典':'新增字典'" :visible.sync="visible"
             @close="$emit('update:show', false)">
    <el-form label-width="auto" :rules="rules" :model="params" ref="editForm" size="small">
      <el-form-item v-if="!isEdit" label="字典代码" prop="code" :rules="params.autoID?rules.code2:rules.code">
        <el-input :placeholder="params.autoID?'无需填写':'请输入字典代码'" v-model="params.code" :disabled="params.autoID===true">
        </el-input>
        <!--<el-checkbox v-model="params.autoID">自动生成</el-checkbox>-->
      </el-form-item>
      <el-form-item label="字典名称" prop="name">
        <el-input placeholder="请输入字典名称" v-model="params.name"></el-input>
      </el-form-item>
      <el-form-item label="上级字典">
        <dic v-model="params.type"></dic>
      </el-form-item>
      <el-form-item label="备注">
        <el-input placeholder="请输入字典备注" v-model="params.remark"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="params.sort" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="params.state"
          :active-value='1'
          :inactive-value='0'
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="启用">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="saveEdit">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Dic from '../../common/DictionaryTreeDropdown'

  export default {
    name: "AddEditRoleDialog",
    components: {
      Dic
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      roleData: null
    },
    watch: {
      show () {
        this.visible = this.show;
        if(!this.roleData){
          for(let k in this.params){
            this.params[k] = '';
          }
          this.params.state = 1;
          this.isEdit = false;
        }
      },
      roleData: {
        handler() {
          if(this.roleData){
            for(let k in this.params){
              this.params[k] = this.roleData[k]?this.roleData[k]:null;
            }
            this.isEdit = true;
          }
        },
        immediate: true,
        deep: true
      }
    }
    ,
    data() {
      return {
        visible: this.show,
        isEdit: false,
        loading: false,
        params: {
          id: '',
          autoID: '',
          code: '',
          name: '',
          type: '',
          parentname: '',
          remark: '',
          sort: 1,
          state: 1
        },
        rules: {
          code: [
            {required: true, message: '字典代码不能为空', trigger: 'blur'}
          ],
          code2: [
            {required: false}
          ],
          name: [
            {required: true, message: '字典名称不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      saveEdit: function(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if(!this.isEdit){
              _url = '/bucket-system/system/dict/add';
            }else{
              _url = '/bucket-system/system/dict/update';
            }
            this.loading = true;
            this.api.post(_url, this.params)
              .then((data) => {
                this.loading = false;
                if(data.code===200){
                  this.visible=false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$parent.query();
                }else{
                  this.$message.error(data.data);
                }
              }).catch((error) => {
                this.loading = false;
              });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
